<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="text-utils.js"></script>
<script type="text/javascript">
	var request = null;

	function createRequest() {
		try {
			request = new XMLHttpRequest();
		} catch (trymicrosoft) {
			try {
				request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (othermicrosoft) {
				try {
					request = new ActiveXObject("Microsoft.XMLHTTP")
				} catch (failed) {
					request = null;
				}
			}
		}
		if (request == null) {
			alert("Error creating request object!");
		}
	}

	function getBoardsSold() {
		createRequest();
		var url = "getUpdateSales.jsp";
		request.open("GET", url, true);	// request method, url, asynchronous?
		request.onreadystatechange = updatePage;
		request.send(null);
	}

	function updatePage() {
		if (request.readyState == 0) {
			document.getElementById("xhr-state")
				.innerHTML = "uninitialized";
		} else if (request.readyState == 1) {
			document.getElementById("xhr-state")
				.innerHTML = "loading";
		} else if (request.readyState == 2) {
			document.getElementById("xhr-state")
				.innerHTML = "loaded";
		} else if (request.readyState == 3) {
			document.getElementById("xhr-state")
				.innerHTML = "interactive";
		} else if (request.readyState == 4) {
			document.getElementById("xhr-state")
				.innerHTML = "completed";
			
			var newTotal = request.responseText;
			var boardsSoldEl = document.getElementById("boards-sold");
			var cashEl = document.getElementById("cash");
			replaceText(boardsSoldEl, newTotal);

			/* Figure out how much cash Katie has made */
			var priceEl = document.getElementById("price");
			var price = getText(priceEl);
			var costEl = document.getElementById("cost");
			var cost = getText(costEl);
			var cashPerBoard = price - cost;
			var cash = cashPerBoard * newTotal;

			/* Update the cash for the slopes on the form */
			cash = Math.round(cash * 100) / 100;
			replaceText(cashEl, cash);
		}
	}
	
	function doAnother() {
		console.log("abcd");
	}
</script>
</head>
<body>

<h3>Boards 'R' Us :: Custom Boards Report</h3>
<hr/>
<table border="1">
	<tr>
		<th>Snowboards Sold</th>
		<td id="boards-sold">1012</td>
	</tr>
	<tr>
		<th>What I Sell'em For</th>
		<td id="price">$249.95</td>
	</tr>
	<tr>
		<th>What it Costs Me</th>
		<td id="cost">$84.22</td>
	</tr>
</table>

<p>Cash for the Slopes: $<span id="cash">167718.76</span></p>

<input type="button" value="Show Me the Money"
	onclick="getBoardsSold()" />

<hr/>

XHR State
<p id="xhr-state"></p>
<input type="button" value="다른 기능"
	onclick="doAnother()" />

</body>
</html>